<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="选择用户" @ok="handleSubmit">
    <BasicForm @register="registerForm">
      <template #toUser="{ model, field }">
        <a-row :gutter="16">
          <a-col :span="20">
            <a-select
              mode="multiple"
              :showArrow="false"
              v-model:value="model[field]"
              placeholder="请选择"
            />
          </a-col>
          <a-col :span="4"><a-button type="primary" @click="choseUserList">选择</a-button></a-col>
        </a-row>
      </template>

      <template #toRole="{ model, field }">
        <a-row :gutter="16">
          <a-col :span="20">
            <a-select
              mode="multiple"
              :options="roleOptions"
              :showArrow="false"
              v-model:value="model[field]"
              placeholder="请选择"
            />
          </a-col>
          <a-col :span="4"><a-button type="primary" @click="choseRoleList">选择</a-button></a-col>
        </a-row>
      </template>
    </BasicForm>

    <MessageUserList @register="registerUserListModal" @success="userListCallback" />
    <MessageRoleList @register="registerRoleListModal" @success="roleListCallback" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { addMessageNotice } from '/@/api/system/system';
  import { formSchema } from './message.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Select, Row, Col } from 'ant-design-vue';
  import MessageUserList from './MessageUserList.vue';
  import MessageRoleList from './MessageRoleList.vue';

  export default defineComponent({
    name: 'MessageModal',
    components: {
      BasicModal,
      BasicForm,
      [Select.name]: Select,
      [Row.name]: Row,
      [Col.name]: Col,
      MessageUserList,
      MessageRoleList,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const roleOptions = ref([]);

      const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
        labelWidth: 100,
        schemas: formSchema,
        showActionButtonGroup: false,
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
        resetFields();
        setModalProps({ confirmLoading: false, maskClosable: false, minHeight: 600, width: 750 });
      });

      /**************************userListModal****************************/
      const [registerUserListModal, { openModal: openUserListModal }] = useModal();

      function choseUserList() {
        const useNames = getFieldsValue().users;
        openUserListModal(true, { useNames: useNames });
      }

      function userListCallback(useNames) {
        setFieldsValue({ users: useNames || [] });
      }

      /**************************roleListModal****************************/
      const [registerRoleListModal, { openModal: openRoleListModal }] = useModal();

      function choseRoleList() {
        const roleCodes = getFieldsValue().roles;
        openRoleListModal(true, { roleCodes: roleCodes });
      }

      function roleListCallback(roles) {
        roleOptions.value = [];
        if (roles) {
          roles.forEach((element) => {
            roleOptions.value.push({
              value: element.roleCode,
              label: element.roleName,
            });
          });
        }
        const roleCodes = roles ? roles.map((data) => data.roleCode) : [];
        setFieldsValue({ roles: roleCodes || [] });
      }

      /**********************表单提交*************************/

      async function handleSubmit() {
        try {
          const values = await validate();
          setModalProps({ confirmLoading: true });
          await addMessageNotice({
            toUser: values.users ? values.users.join() : '',
            toRole: values.roles ? values.roles.join() : '',
            subject: values.subject ? values.subject : '',
            content: values.content ? values.content : '',
          });
          createMessage.success('新增成功');
          closeModal();
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        registerModal,
        registerForm,
        registerUserListModal,
        choseUserList,
        handleSubmit,
        userListCallback,
        registerRoleListModal,
        roleOptions,
        choseRoleList,
        roleListCallback,
      };
    },
  });
</script>
